<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, RouterLink } from 'vue-router';
import commodityAdd from '@/components/commodity/commodityAdd.vue';
import axios from 'axios';
import { showMsg } from '@/components/Util';
let list = ref([]);
let comm = ref([]);
let arr = ref([]);
let router = useRouter();//路由对象 用来做路由跳转
const isLoggedIn = ref(false);
let title = ref();
let student = ref({
    id: '',
    name: '',
    tu: '',
    jq: '',
    gs: '',
    leixing: ''
});
function sfLogin() {
    const loggedIn = localStorage.getItem('isLoggedIn');
    if (loggedIn === 'true') {
        isLoggedIn.value = true;
    }
}
// 商品
function add() {
    axios.get('/api/list_commodity').then(res => {
        console.log(res);
        if (res.data.status == 200) {
            list.value = res.data.data;
        }
    })
}
// 购物车
function edit() {
    if (isLoggedIn.value) {
        axios.get('/api/list_shoppingCart').then(res => {
            console.log(res);
            if (res.data.status == 200) {
                comm.value = res.data.data;
            }
        })
    }
}
//获取登录账号信息
function user() {
    if (isLoggedIn.value) {
        axios.get('/api/list_user').then(res => {
            console.log(res);
            if (res.data.status == 200) {
                arr.value = res.data.data;
            }
        })
    }

}
onMounted(() => {
    sfLogin();
    add();
    edit();
    user();
})
let addshow = ref(false);
function newStudent() {
    addshow.value = false;
}
//加入购物车
function adde(obj) {
    if (isLoggedIn.value) {
        axios.post('/api/add_shoppingCart', obj, {
            headers: {
                "Content-Type": "application/json"
            }
        }).then(res => {
            if (res.data.status == 200) {
                edit();
                // emits('submit');
            } else {
                showMsg(res.data.msg, 'error', 2000);
            }
        })
    } else {
        alert('请先登录');
    }

}
//退出
function tc() {
    axios.get('/api/logout').then(res => {
        localStorage.removeItem('isLoggedIn');
        router.push('/login');
        showMsg(res.data.msg, 'info');
    })
}

function tjxs() {
    if (isLoggedIn.value) {
        title.value = '添加商品';
        addshow.value = true;
    } else {
        alert('请先登录');
    }
}
let input = ref();
//搜索
function Search() {
    axios.get('/api/listLike_commodity/' + input.value).then(res => {
        if (res.data.status == 200) {
            list.value = res.data.data;
        }
    })
}

</script>

<template>

    <div class="common-layout">
        <div class="title">
            <ul>
                <li>百宝箱</li>
                <li>
                    <div>
                        <h4 v-if="isLoggedIn">欢迎回来！</h4>
                        <h4 v-else>还没有登录,
                            <RouterLink to="/login" style="color: blue;">去登录</RouterLink>
                        </h4>
                    </div>
                </li>
                <li>
                    <router-link to="/gwc" style="text-decoration: none;" v-if="isLoggedIn">购物车({{ comm.length
                        }})</router-link>
                    <span v-else>购物车(0)</span>
                </li>
                <li><span class="tc" @click="tc">退出登录</span></li>
            </ul>
        </div>
        <commodityAdd :title="title" :student="student" @submit="newStudent" @close="addshow = false" v-show="addshow">
        </commodityAdd>
        <el-container class="cc">
            <el-header class="heading">
                <div class="too1">
                    <el-input v-model="input" style="width: 540px;" placeholder="查找商品" />
                    <el-button type="primary" @click="Search">
                        <el-icon style="vertical-align: middle">
                            <Search />
                        </el-icon>
                        <span style="vertical-align: middle"> 搜索 </span>
                    </el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <ul>
                        <li>食品</li>
                    </ul>
                </el-aside>
                <el-main>
                    <div class="yhxx">
                        <span v-if="isLoggedIn">名称：{{ arr[0].name }}</span>
                        <span v-else>名称：未登录</span>
                        <span v-if="isLoggedIn">我的钱包：{{ arr[0].qianbao }}</span>
                        <span v-else>我的钱包：0</span>
                        <span>我的店铺</span>
                        <button @click="tjxs">添加商品</button>
                    </div>
                </el-main>
            </el-container>
        </el-container>
        <div class="box">
            <ul>
                <li v-for="(item, index) in list" :key="index" :title="item.name">
                    <img :src="'/src/assets/image/' + item.tu + '.jpg'" alt="">
                    <div class="zi">
                        <span>{{ item.name }}</span>
                        <span>￥{{ item.jq }}</span>
                    </div>
                    <input type="button" value="加入购物车" @click="adde(item)">
                </li>
            </ul>
        </div>
    </div>

</template>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.common-layout {
    width: 100vw;
    height: 100vh;
    background-color: #ccc;
}

.title {
    width: 100vw;
    height: 40px;
    background-color: white;
}

.title>ul {
    width: 85%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    font-size: 14px;
}

.tc {
    cursor: pointer;
    padding: 5px;
    color: white;
    background-color: aquamarine;
}

.cc {
    width: 85%;
    margin: 0 auto;
}

.heading {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.too1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.too1>button {
    background-color: #0aa;
    border: none;
    color: white;
    padding: 5px;
    cursor: pointer;
}

.yhxx {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.box {
    width: 85%;
    margin: 0 auto;
    background-color: white;
}

.box>ul {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
}

.box>ul>li {
    width: 160px;
    padding: 5px;
    border-radius: 5px;
    background-color: white;
    display: flex;
    flex-direction: column;
}

.box>ul>li:hover {
    cursor: pointer;
    border: 1px solid red;
}

.box>ul>li>img {
    width: 160px;
    height: 150px;
    border-radius: 5px 5px 0 0;
}

.zi {
    display: flex;
    flex-direction: column;
}

.zi>span:nth-child(2) {
    color: red;
}

@media (max-width: 800px) {
    .common-layout {
        width: 800px;
        height: 100vh;
        background-color: #ccc;
    }

    .title {
        width: 800px;
        height: 40px;
        background-color: white;
    }
}
</style>
